<template>
  <Category :scene="scene"></Category>
  <el-card shadow="hover" style="margin: 10px 0;">
    <div v-show="scene === 0">
      <el-button :icon="Plus" type="primary" :disabled="!!!categoryStore.c3Id" @click="addSpu">添加SPU
      </el-button>
      <el-table border style="margin: 10px 0" id="tableData" :data="SpuArr">
        <!-- type：index 为序号 -->
        <el-table-column label="序号" width='80px' align="center" type="index"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column show-overflow-tooltip label="SPU描述" prop="description">
        </el-table-column>
        <el-table-column label="SPU操作">
          <!-- row:代表是每一个已有的SPU -->
          <template #="{ row, $index }">
                            <el-button type="primary" size="small" :icon="Plus" title="添加SKU"
                                @click="addSku(row)"></el-button>
                            <el-button type="warning" size="small" :icon="Edit" title="更新SPU"
                                @click="updateSpu(row)"></el-button>
                            <el-button type="info" size="small" :icon="InfoFilled" title="查看SKU列表"
                                @click="findSkuList(row)"></el-button>
                            <el-button @click="removeSpu(row.id)" type="danger" size="small" :icon="Delete"
                                title="删除SKU"></el-button>
                        </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
        layout="prev, pager, next, jumper,->,sizes,total" :total="total" @current-change="getHasSpuList"
        @size-change="sizeHandler" />
    </div>
    <SpuForm v-show="scene == 1" @changeScene="changeScene" ref="spu"></SpuForm>
    <SkuForm v-show="scene == 2" @updateScene="updateScene" ref="sku"></SkuForm>
    <!-- 展示已有的SKU列表对话框 -->
    <el-dialog v-model="visite" align-center title="SKU列表">
      <el-table border :data="skuArr" v-loading="loading">
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="重量" prop="weight"></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px;">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { watch, ref, reactive, nextTick } from 'vue';
import type { Records, HasSpuResponseData } from '@/api/product/spu/interface/interface';
import { reqHasSpu, reqSkuList, reqDeleteSpu } from '@/api/product/spu';
import { ElMessage } from 'element-plus';
// 引入分类仓库
import useCategoryStore from '@/stores/category'
//引入子组件
import SpuForm from './spuForm.vue';
import SkuForm from './skuForm.vue';
const categoryStore = useCategoryStore();
//场景切换
const scene = ref<number>(0);
//分页器当前页码--默认第一页
const currentPage = ref<number>(1);
//每页需要展示几条数据
const pageSize = ref<number>(3);
//存储当前页码的SPU数据
const SpuArr = ref<Records>([]);
// 全部数据 数量
const total = ref<number>(0);
//获取子组件实例
const spu = ref();
//获取子组件实例skuForm
const sku = ref();
//存储SKU列表数据
const skuArr = ref<any>([]);
//控制dialog显示与隐藏
const visite = ref<boolean>(false);
const loading = ref<boolean>(false);
// 监听三级分类
watch(() => categoryStore.c3Id, () => {
  //清空数据
  SpuArr.value = [];
  // 前者为真执行，前提保证三级分类ID不能为空
  categoryStore.c3Id && getHasSpuList(currentPage.value);
})
// 发送请求,获取最新数据
const getHasSpuList = async (page: number = 1) => {
  currentPage.value = page
  const result: HasSpuResponseData = await reqHasSpu(currentPage.value, pageSize.value, categoryStore.c3Id);
  SpuArr.value = result.records
  total.value = result.total;
}
// 每页数量变换
const sizeHandler = (val: number) => {
  pageSize.value = val;
  getHasSpuList();
}
//添加SPU按钮的回调
const addSpu = () => {
  //场景切换为1,显示子组件SpuForm
  scene.value = 1;
}
//更新SPU按钮的回调
const updateSpu = (row: any) => {
  //场景切换为1,显示子组件SpuForm
  scene.value = 1;
  //调用儿子的方法
  spu.value.initHasSpu(row);
}
//添加SKU
const addSku = (spu: any) => {
  //场景切换为2,显示子组件SkuForm
  scene.value = 2;
  //调用子组件方法
  sku.value.initSku(spu);
}
//儿子绑定自定义事件,通知父组件切换场景
const changeScene = (val: number) => {
  scene.value = val;
  getHasSpuList(currentPage.value)
}
//子组件SkuForm自定义事件的回调
const updateScene = (val: number) => {
  scene.value = val;
}
//查看SKU列表按钮的回调
const findSkuList = async (spu: any) => {
  //清空数据
  skuArr.value = [];
  //展示对话框
  visite.value = true;
  //开始加载
  loading.value = true;
  const result = await reqSkuList(spu.id);
  skuArr.value = result;
  //加载结束
  loading.value = false;

}

//删除已有的SPU
const removeSpu = async (spuId: number) => {
  try {
    //删除成功
    await reqDeleteSpu(spuId);
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    getHasSpuList(SpuArr.value.length > 1 ? currentPage.value : currentPage.value - 1);
  } catch (error) {

  }
}
</script>

<script lang="ts">
name: 'Spu'
</script>

<style scoped></style>